<template>
	<div style="display: flex; align-items: center; width: 720px; margin: auto">
		<el-table :data="dataList" border>
			<el-table-column label="编号" prop="no">
			</el-table-column>
			<el-table-column prop="name" label="名称" width="200">
			</el-table-column>
			<el-table-column prop="currentValue" label="参数值" width="180">
				<template #default="scope">
					{{ scope.row.currentValue + scope.row.unit }}
				</template>
			</el-table-column>
			<el-table-column label="报警值" width="180">
				<template #default="scope">
					{{ stringNTrNub(scope.row.warningValue) + scope.row.unit }}
				</template>
			</el-table-column>
			<el-table-column prop="point" label="状态">
				<template #default="scope">
					<CardDataPoint
						:data="scope.row.currentValue"
						:point="scope.row.warningValue"
						:open="scope.row.symbol"
						top="7"
						left="5"></CardDataPoint>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
import labTable from '@/mixins/table.json'
import CardDataPoint from '@/components/CardDataPoint.vue'

let props = defineProps({
	listData: Array,
	keyName: String
})

let dataList = ref([])
let labTableInfo = labTable[props.keyName]
let stringNTrNub = computed(()=>{
	return (val) =>{
		let str = val
		if(typeof str == "string"){
			return JSON.parse(str) ?? 0
		}
	}
}) 
watch(()=>props.listData,(newV,oldV)=>{
	let dataArray = oldV ?? newV
	dataArray = dataArray.filter((item)=>{
		return labTableInfo[item.columnname].name != "空"
	})
	dataArray.map((item)=>{
		item.no = labTableInfo[item.columnname].no
		item.name = labTableInfo[item.columnname].name
		item.unit = labTableInfo[item.columnname].unit
	})
	dataList.value = dataArray
	// console.log(dataList.value);
})
</script>

<style scoped></style>
